<template>
  <div class="tablestyle">
    <!-- 基本属性 -->
    <el-divider content-position="left">基本属性</el-divider>
    
    <!-- 表格编辑选项 -->
    <el-form label-width="90px" label-position="left" size="small">
      <el-form-item label="表格样式">
        <el-checkbox v-model="datas.border">显示边框</el-checkbox>
        <el-checkbox v-model="datas.stripe">显示斑马纹</el-checkbox>
        <el-checkbox v-model="datas.showHeader">显示表头</el-checkbox>
        <el-checkbox v-model="datas.highlightCurrentRow">高亮当前行</el-checkbox>
        <el-checkbox v-model="datas.showIndex">显示索引列</el-checkbox>
      </el-form-item>
      
      <el-form-item label="表格高度">
        <el-input v-model="datas.height" placeholder="留空为自适应，如需固定高度请输入如：300px"></el-input>
      </el-form-item>
      
      <el-form-item label="最大高度">
        <el-input v-model="datas.maxHeight" placeholder="可选，例如：500px"></el-input>
      </el-form-item>
      
      <!-- 工具栏配置 -->
      <el-divider content-position="left">工具栏配置</el-divider>
      
      <el-form-item label="显示工具栏">
        <el-switch v-model="datas.showToolbar"></el-switch>
      </el-form-item>
      
      <template v-if="datas.showToolbar">
        <el-form-item label="工具栏位置">
          <el-radio-group v-model="datas.toolbarPosition">
            <el-radio label="top">顶部</el-radio>
            <el-radio label="bottom">底部</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <el-form-item label="工具栏按钮">
          <el-checkbox v-model="datas.showRefresh">刷新按钮</el-checkbox>
          <el-checkbox v-model="datas.showFullscreen">全屏按钮</el-checkbox>
          <el-checkbox v-model="datas.showColumnSelect">列设置按钮</el-checkbox>
        </el-form-item>
      </template>
      
      <!-- 操作列配置 -->
      <el-divider content-position="left">操作列配置</el-divider>
      
      <el-form-item label="显示操作列">
        <el-switch v-model="datas.showOperationColumn"></el-switch>
      </el-form-item>
      
      <template v-if="datas.showOperationColumn">
        <el-form-item label="操作列标题">
          <el-input v-model="datas.operationColumnLabel" placeholder="例如：操作"></el-input>
        </el-form-item>
        
        <el-form-item label="操作列宽度">
          <el-input v-model="datas.operationColumnWidth" placeholder="例如：150"></el-input>
        </el-form-item>
        
        <el-form-item label="操作按钮">
          <div class="button-list">
            <div v-for="(btn, index) in datas.operationButtons" :key="index" class="button-item">
              <el-input v-model="datas.operationButtons[index]" placeholder="按钮文本"></el-input>
              <el-button 
                type="danger" 
                icon="Delete" 
                size="small" 
                circle
                @click="removeOperationButton(index)"
                :disabled="datas.operationButtons.length <= 1"
              ></el-button>
            </div>
          </div>
          <el-button type="primary" size="small" @click="addOperationButton" style="margin-top: 10px;">
            添加操作按钮
          </el-button>
        </el-form-item>
      </template>
      
      <!-- 分页配置 -->
      <el-divider content-position="left">分页配置</el-divider>
      
      <el-form-item label="显示分页">
        <el-switch v-model="datas.showPagination"></el-switch>
      </el-form-item>
      
      <template v-if="datas.showPagination">
        <el-form-item label="每页条数">
          <el-input-number v-model="datas.pageSize" :min="1" :max="100"></el-input-number>
        </el-form-item>
        
        <el-form-item label="可选每页条数">
          <el-select 
            v-model="datas.pageSizes" 
            multiple 
            collapse-tags 
            style="width: 100%"
            placeholder="选择可用的每页条数选项"
          >
            <el-option :value="10" label="10条/页"></el-option>
            <el-option :value="20" label="20条/页"></el-option>
            <el-option :value="50" label="50条/页"></el-option>
            <el-option :value="100" label="100条/页"></el-option>
            <el-option :value="200" label="200条/页"></el-option>
          </el-select>
        </el-form-item>
      </template>
      
      <!-- 表格列配置 -->
      <el-divider content-position="left">表格列</el-divider>
      
      <div class="editor-actions">
        <el-button type="primary" size="small" @click="addColumn">
          添加列
        </el-button>
        <el-button type="warning" size="small" @click="resetColumns">
          重置列
        </el-button>
      </div>
      
      <div v-for="(column, index) in datas.columns" :key="index" class="column-item">
        <div class="column-header">
          <span>列 {{ index + 1 }}</span>
          <el-button 
            type="danger" 
            size="small" 
            icon="Delete" 
            circle
            @click="removeColumn(index)"
            :disabled="datas.columns.length <= 1"
          ></el-button>
        </div>
        
        <el-form-item label="属性名">
          <el-input v-model="column.prop" placeholder="数据属性名，如：name"></el-input>
        </el-form-item>
        
        <el-form-item label="标题">
          <el-input v-model="column.label" placeholder="列标题，如：姓名"></el-input>
        </el-form-item>
        
        <el-form-item label="列宽">
          <el-input v-model="column.width" placeholder="留空为自适应，固定宽度如：120px"></el-input>
        </el-form-item>
        
        <el-form-item label="对齐方式">
          <el-select v-model="column.align" placeholder="选择对齐方式">
            <el-option label="左对齐" value="left"></el-option>
            <el-option label="居中" value="center"></el-option>
            <el-option label="右对齐" value="right"></el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item label="可排序">
          <el-switch v-model="column.sortable"></el-switch>
        </el-form-item>
      </div>
      
      <!-- 表格数据 -->
      <el-divider content-position="left">表格数据</el-divider>
      
      <div class="editor-actions">
        <el-button type="primary" size="small" @click="addRow">
          添加行
        </el-button>
        <el-button type="warning" size="small" @click="resetData">
          重置数据
        </el-button>
      </div>
      
      <div v-for="(row, rowIndex) in datas.data" :key="rowIndex" class="row-item">
        <div class="row-header">
          <span>行 {{ rowIndex + 1 }}</span>
          <el-button 
            type="danger" 
            size="small" 
            icon="Delete" 
            circle
            @click="removeRow(rowIndex)"
            :disabled="datas.data.length <= 1"
          ></el-button>
        </div>
        
        <div v-for="column in datas.columns" :key="column.prop" class="cell-item">
          <el-form-item :label="column.label">
            <el-input v-model="row[column.prop]" :placeholder="`请输入${column.label}`"></el-input>
          </el-form-item>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'tablestyle',
  props: {
    datas: Object,
    'data-type': String,
  },
  created() {
    // 确保所有需要的属性都存在
    if (!this.datas.toolbarPosition) {
      this.datas.toolbarPosition = 'top';
    }
    if (!this.datas.operationButtons) {
      this.datas.operationButtons = ['查看', '编辑', '删除'];
    }
    if (!this.datas.pageSizes) {
      this.datas.pageSizes = [10, 20, 50, 100];
    }
  },
  methods: {
    addColumn() {
      const newIndex = this.datas.columns.length + 1;
      this.datas.columns.push({
        prop: `column${newIndex}`,
        label: `列${newIndex}`,
        width: '',
        sortable: false,
        align: 'left'
      });
      
      // 为每个现有的数据行添加新列的属性
      this.datas.data.forEach(row => {
        row[`column${newIndex}`] = '';
      });
    },
    removeColumn(index) {
      if (this.datas.columns.length > 1) {
        const columnProp = this.datas.columns[index].prop;
        
        // 从每个数据行中移除该列的属性
        this.datas.data.forEach(row => {
          delete row[columnProp];
        });
        
        this.datas.columns.splice(index, 1);
      }
    },
    resetColumns() {
      // 保存当前的属性名，以便后续更新数据
      const oldProps = this.datas.columns.map(col => col.prop);
      
      // 设置默认列
      this.datas.columns = [
        { prop: 'date', label: '日期', width: '', sortable: false, align: 'left' },
        { prop: 'name', label: '姓名', width: '', sortable: false, align: 'left' },
        { prop: 'address', label: '班级', width: '', sortable: false, align: 'left' }
      ];
      
      // 更新数据中的属性
      const newProps = this.datas.columns.map(col => col.prop);
      this.datas.data = this.datas.data.map(row => {
        const newRow = {};
        newProps.forEach(prop => {
          newRow[prop] = oldProps.includes(prop) ? row[prop] || '' : '';
        });
        return newRow;
      });
    },
    addRow() {
      const newRow = {};
      
      // 为每个列创建空值
      this.datas.columns.forEach(column => {
        newRow[column.prop] = '';
      });
      
      this.datas.data.push(newRow);
    },
    removeRow(index) {
      if (this.datas.data.length > 1) {
        this.datas.data.splice(index, 1);
      }
    },
    resetData() {
      // 根据当前列配置重置默认数据
      this.datas.data = [
        { date: '2023-05-01', name: '张三', address: '三年级' },
        { date: '2023-05-02', name: '李四', address: '四年级' },
        { date: '2023-05-03', name: '王五', address: '五年级' }
      ];
      
      // 确保数据中包含所有当前列
      const props = this.datas.columns.map(col => col.prop);
      this.datas.data.forEach(row => {
        props.forEach(prop => {
          if (!(prop in row)) {
            row[prop] = '';
          }
        });
      });
    },
    addOperationButton() {
      this.datas.operationButtons.push('新按钮');
    },
    removeOperationButton(index) {
      if (this.datas.operationButtons.length > 1) {
        this.datas.operationButtons.splice(index, 1);
      }
    }
  }
}
</script>

<style scoped lang="less">
.tablestyle {
  width: 100%;
  box-sizing: border-box;
  
  .editor-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
  }
  
  .column-item, .row-item {
    border: 1px solid #ebeef5;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 15px;
    
    .column-header, .row-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      font-weight: bold;
    }
  }
  
  .cell-item {
    margin-bottom: 5px;
  }
  
  .button-list {
    .button-item {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      
      .el-input {
        flex: 1;
        margin-right: 10px;
      }
    }
  }
}
</style> 